<template>
  <div id="face_to_face">
    <vant-navbar title="面对面建群" style="margin-bottom: 10px"></vant-navbar>
    <div style="text-align: center">

      <pre>和身边的朋友输入同样的六位数字
  进入同一个群</pre>
    </div>
    <!-- 密码输入框 -->
    <van-password-input
      :value="value"
      :length="4"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <!-- 数字键盘 -->
    <van-number-keyboard
      v-model="value"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />
  </div>
</template>

<script>
import VantNavbar from "@/components/VantNavbar.vue";
import { ref } from "vue";

export default {
  // setup() {
  //   const value = ref("");
  //   const showKeyboard = ref(true);
  //   return {
  //     value,
  //     showKeyboard,
  //   };
  // },
    components: {VantNavbar},
    data() {
      return{
        value: '',
        showKeyboard: true,
      }
    },
    // updated() {
    //     console.log(this.value);
    // }
};
</script>

<style>
#face_to_face{
  /* background-color: rgb(68, 67, 67); */
}
</style>